import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonModal, useModal } from "@/views/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { Alert, Button, Col, Form, InputNumber, Modal, Radio, Row, Space, Progress, message } from "antd";
import CommonInputNumber from "@/pages/OrderModule/common/components/CommonInputNumber";
import { useCallback, useEffect, useState } from "react";
import { downLoad } from "@/utils/utils";
import { useExportTask } from "@/views/hooks/useExportTask";
import ProgressModal from "@/views/components/UIModal/ProgressModal";
import DownloadModal from "@/views/components/UIModal/DownloadModal";

/**
 * 导出表格
 *
 * */

function ActionModal(props) {
	console.log("ActionModal(props)", props);
	const { onCancel, createTaskData, getContainer } = props;

	const [visible, setVisible] = useState("DownloadModal");
	// const [visible, setVisible] = useState("ProgressModal");

	const { percent, step, handleDownload, startTask, clearTimer } = useExportTask();

	useEffect(() => {
		startTask(createTaskData);
	}, []);

	useEffect(() => {
		if (step.second === true) {
			setVisible("DownloadModal");
		}
		if (step.first === false || step.second === false || step.third === true) {
			onCancel();
		}
	}, [step]);

	return (
		<>
			<ProgressModal
				contentStyle={{ marginTop: 20 }}
				getContainer={getContainer}
				zIndex={99999}
				visible={visible === "ProgressModal"}
				type="progress"
				percent={percent}
				msg="正在导出商品，请等待..."
				cancelText="跳过等待"
				onCancel={() => {
					onCancel();
					clearTimer();
				}}
			/>

			<DownloadModal
				getContainer={getContainer}
				zIndex={99999}
				visible={visible === "DownloadModal"}
				onCancel={onCancel}
				onOk={handleDownload}
			/>
		</>
	);
}

export default ActionModal;
